<template>
	<div class="rank-info-content plist-info">
		<div class="rank-banner-wrap"
		     :style="{backgroundImage: `url(${imgurl})`}">
			 <!-- <a class="rank-head-back"></a> -->
			 <p>{{title1}}</p>
		</div>
		
		<div class="plist-desp container">
			<p class="plist-desp-p" :class="{'plist-desp-hide': hideDesp }">{{desp}}</p>
			<img src="../assets/images/close_icon.png" alt="" @click="toggleDesp" class="plist-desp-icon" v-if="hideDesp">
			<img src="../assets/images/open_icon.png" alt="" @click="toggleDesp" class="plist-desp-icon" v-else>
		</div>
		<div class="plist-desp-bottom" style="width: 100%;height: 5px;background-color: #f1f1f1"></div>
		<!-- 歌单列表 -->
		<div class="rank-info-list">
			<mt-cell v-for="(item,index) in songList" :title="item.filename" @click.native="playAudio(index)" :key="index">
				<img src="../assets/images/download_icon.png" width="20" height="20">
			</mt-cell>
		</div>
	</div>
</template>
<script>
import {getPlistInfo} from "@/api"
import { Indicator } from 'mint-ui'
import { PLAY_AUDIO} from '@/mixins'
export default{
    mixins:[PLAY_AUDIO],
    data(){
        return{
             	imgurl: '',
				title: '',
				title1:"",
				songList: [],
				// updateTime: '',
				desp: '',
				hideDesp: true,
				// opacity: 0,
        }
    },
    mounted(){
        this.getlist()
	},
	methods:{
		getlist(){
			var specialid=this.$route.params.specialid
			console.log(this.$route.params)
			Indicator.open({
				text:"加载中...",
				spnnerTyoe:"snack"
			})
			getPlistInfo(specialid).then(({data})=>{
				console.log(data)
				Indicator.close()
				const infolist=data.info.list
				const songlist=data.list.list.info
				this.desp=infolist.intro
				this.songList=songlist//为了设置图片
				this.title1=infolist.specialname
				this.imgurl=infolist.imgurl.replace("{size}",'400')
				console.log(this.songList)
			})
		},	
			toggleDesp(){
				this.hideDesp=!this.hideDesp
			}
	}

}
</script>

<style scoped>
	.rank-banner-wrap {
		height: 250px;
		background-size: 100%
	}
</style>